[CSS] 테두리 및 요소에 그림자 효과 부여하기, box-shadow

CSS를 사용하여 엘리먼트 요소에 그림자 효과를 부여하는 방법을 알아봅니다. 어떻게하면 그림자(shadow)를 만들 수 있을까요? 그리고 언제 사용할까요?

! 그림자 효과 사용하는 경우

엘리먼트에 그림자 효과를 사용하는 경우는 웹페이지를 만들때 특히 아래의 경우에 많이 사용됩니다.

• 모달(Modal) 팝업을 만드는 경우
• 버튼 또는 아이콘에 그림자 효과를 주는 경우
• 이미지에 그림자 효과를 주는 경우
  

그럼 아래는 어떻게 그림자 효과를 만들 수 있는지 알아봅니다.

# css를 사용하여 그림자 만들기, box-shadow

텍스트에 그림자 효과를 부여하려면 text-shadow 속성을 사용합니다. 텍스트가 아닌 엘리먼트 요소에도 그림자를 만들 수 있습니다. 이 경우 box-shadow 속성을 사용해 가능합니다. 먼저 box-shadow의 사용방법, 문법은 아래와 같습니다.

box-shadow: h-offset v-offset blur spread color type;

위 값들 중에서 좌우 상하 위치값 h-offset 그리고 v-offset은 필수값이며 나머지 값들은 선택이 가능합니다. 각각의 값들에 대하여 알아보겠습니다.

1. h-offset(pixel)
좌우 위치값을 조정. 음수 사용시 위로 이동함.

2. v-offset(pixel)
상하 위치값을 조정. 음수 사용시 좌측으로 이동.

3. blur(pixel)
불투명한 정도. 값이 클수록 불투명.

4. spread(pixel)
그림자 크기를 결정. 음수 사용시 그림자 크기가 작아짐.

5. color
그림자의 색. 지정하지 않는 경우 폰트색을 기본값으로 적용됨.

6. type
그림자의 타입을 결정. 내부 그림자 사용시 inner 사용이 가능함

이처럼 매우 다양한 옵션이 설정 가능합니다. 그럼 아래부터는 위 값들을 적용하고 어떻게 사용하는지 예제를 통하여 자세히 알아봅니다.

# box-shadow 속성 예제보기

아래 예제는 다양한 값들에 따라 그림자 효과를 사용한 예제 소스입니다. 각각 어떻게 나타나는지 보세요.

1. 각각 10px 아래, 우측에 위치한 5px blur한 빨간 그림자

@ 실행결과


2. 중앙에서 20px 블러한 검정색 그림자

@ 실행결과

3. 중앙에서 5px blur하고 20px 크기의 큰 그림자

@ 실행결과

4. 아래 10px 우측 20px 위치하면서 3px 블러하고 -3px 크기의 작은 그림자

@ 실행결과

! 그림자타입에 inset을 넣은 경우

아래는 그림자 타입에 inset을 추가하여 내부 그림자를 만든 방법입니다. 이처럼 외부 그림자뿐만 아니라 내부 그림자 역시 만들 수 있습니다.

@ 실행결과

! inset, outset 타입 두 가지를 동시에 적용하는 방법

만약 내부와 외부 동시에 그림자 효과를 추가하려면 콤마를 구분자로 사용하여 앞에 inset을 먼저 사용하면 구현할 수 있습니다.

브라우저에서 실행하면 아래와 같이 나타납니다.

# 마치면서

그림자 효과 box-shadow의 경우 예전에는 대부분 이미지에 그림자를 함께 사용되었지만 호환되는 브라우저 환경이 많아지면서 그 쓰임이 매우 많이진 css 속성입니다. 대부분의 환경에서 구현되므로 좀 더 간단하게 그림자 효과를 줄 수 있습니다.

참고로, 이 속성은 IE 9.0 이상에서는 모두 호환 가능합니다.